<!DOCTYPE html>
<html>
	<head>
		<title>CSS Reftest Reference</title>
		<link rel="author" title="Mihai Balan" href="mibalan@adobe.com">
		<style>
		/*Lists setup*/
		ol {
			padding-left: 1em;
		}
		ol>li {
			display: block;
			position: relative;
		}
		li::after {
			position: absolute;
			top: 0;
			right: 0;
			margin-right: .5em;
		}
		ol.part {
			counter-reset: part 0;
		}
		ol.part>li {
			counter-increment: part;
		}
		ol.part>li::after {
			content: counter(part, upper-roman) " ";
			font-weight: bold;
		}

		ol.chapter {
			counter-reset: chapter 0;
		}
		ol.chapter>li {
			counter-increment: chapter;
		}
		ol.chapter>li::after {
			content:  "\2026\ " counter(chapter, decimal);
		}
		
		ol.section {
			counter-reset: section 0;
		}
		ol.section>li {
			counter-increment: section;
		}
		ol.section>li::after {
			content: counter(part, upper-roman) "." counter(chapter, decimal) "-" counter(section, lower-latin) " ";
			color: blue;
		}
		/*Extracted content setup*/
		ol.part1-chap3-section {
			counter-reset: part 1 chapter 3;
		}
		ol.part3-chap {
			counter-reset: part 3;
		}
		.slim {
			margin-top: 0;
			margin-bottom: 0;
		}
		/*Regions setup*/
		.region {
			background-color: lightgray;
			margin: 1em;
			float: left;
			width: 20em;
			height: 20em;
		}
		</style>
	</head>
	<body>
		<p>This test passes if you see two gray rectangles, as described below. All numbering should be aligned to the right margin of the rectangles.</p>
		<p>The first rectangle contains two numbered lists. The <strong>first list</strong> has three items and is numbered using bold roman numerals, starting at 1 (I). After the first item there's a numbered sublist; it is indented and has four items, numbered using decimal numbers preceded by an ellipsis (&hellip;), starting at 1. After the last item in this sublist there's a single item numbered list; the numbering is blue and uses three levels of numbering: roman, decimal and with latin letters, respectively; numbering starts with I.4-a. The <strong>second list</strong> has two items and uses the same blue, three-level numbering, that starts at I.3-a this time.</p>
		<p>The second rectangle contains a two-items numbered list, numbered using decimal numbers preceded by an ellipsis. After the first item there's a sublist. The sublist is indented and has blue, three level-numbering: roman, decimal and with latin letters, respectively. Numbering starts with <em>III.1-a</em>.</p>
		<div class="region" id="r1">
			<ol class="part">
				<li>Part I
					<ol class="chapter">
						<li>Chapter 1</li>
						<li>Chapter 2</li>
						<li>Chapter 3
						</li>
						<li>Chapter 4
							<ol class="section">
								<li>Section I.4-a</li>
							</ol>
						</li>
					</ol>
				</li>
				<li>Part II</li>
				<li>Part III
				</li>
			</ol>
			<ol class="section part1-chap3-section">
				<li>Section I.3-a</li>
				<li>Section I.3-b</li>
			</ol>
		</div>
		<div class="region" id="r2">
			<ol class="chapter part3-chap slim">
				<li>Chapter 1
					<ol class="section">
						<li>Section III.1-a</li>
						<li>Section III.1-b</li>
						<li>Section III.1-c</li>
						<li>Section III.1-d</li>
					</ol>
				</li>
				<li>Chapter 2</li>
			</ol>
		</div>
	</body>
</html>